<template>
  <Dialog title="项目单价" v-model="dialogVisible" width="80%">
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="零件名称" prop="partsName">
        <el-input
          v-model="queryParams.partsName"
          placeholder="请输入零件名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="规格" prop="specification">
        <el-input
          v-model="queryParams.specification"
          placeholder="请输入规格"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="加工工序" prop="processing">
        <el-input
          v-model="queryParams.processing"
          placeholder="请输入加工工序"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单 -->
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      row-key="id"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      :height="300"
      border
    >
      <el-table-column type="selection" width="80" align="center" />
      <el-table-column type="index" width="80" label="序号" align="center" />
      <el-table-column
        :label="item.label"
        :min-width="item.width"
        :prop="item.val"
        v-for="item in tableTitle"
        :key="item.val"
        align="left"
        header-align="left"
      />
    </el-table>
    <Pagination
      style="float: none; justify-content: flex-end"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <div class="footer">
      <el-button @click="submitForm" type="primary" :disabled="loading">确 定</el-button>
      <el-button @click="closeEialog">取 消</el-button>
    </div>
  </Dialog>
</template>
<script setup lang="ts">
   import request from '@/config/axios'
   const queryFormRef = ref() // 搜索的表单
   const total = ref(0)
   const queryParams = reactive({
     pageNo: 1,
     pageSize: 10,
     partsName: null,
     specification: null,
     processing: null,
     //默认为机加
     dictProcessName: 20,
     dictMachiningProcess:null,
     dictEnableStatus: 10
   })
   // 多选
   const multipleSelection = ref([])
   const handleSelectionChange = (val) => {
     multipleSelection.value = val
   }

   /**获取数据 */
   const tableData = ref([])
   /**默认表头 */
   const tableTitle = ref([
     {
       label: '零件名称',
       val: 'partsName',
       width: 200
     },
     {
       label: '规格',
       val: 'specification',
       width: 200
     },
     {
       label: '加工工序',
       val: 'processing',
       width: 200
     },
     {
       label: '单位',
       val: 'unit',
       width: 200
     },
     {
       label: '单价(元)',
       val: 'unitPrice',
       width: 100
     },
     {
       label: '备注',
       val: 'remark',
       width: 200
     }
   ])
   const loading = ref(false)
   //默认为生成价目审核请求地址
   const getList = async () => {
     loading.value = true
     const params = JSON.parse(JSON.stringify(queryParams))
     console.log(params)
     try {
       const data = await request.get({ url: '/config/wage-machining-unit-price/page', params })
       total.value = data.total
       tableData.value = data.list
       // 有选中传参，设置数据
       if (multipleSelection.value.length) {
         multipleSelection.value.forEach((item) => {
           const row = tableData.value.find((data) => data.id == item.relationId)
           if (row) {
            //加延迟，不加有坑
             setTimeout(() => {
               multipleTableRef.value!.toggleRowSelection(row, true)
             }, 200)
           }
         })
       }
     } finally {
       loading.value = false
     }
   }
   /** 搜索按钮操作 */
   const handleQuery = () => {
     queryParams.pageNo = 1
     getList()
   }

   /** 重置按钮操作 */
   const resetQuery = () => {
     queryFormRef.value.resetFields()
     handleQuery()
   }

   const dialogVisible = ref(false) // 弹窗的是否展示
   /** 打开弹窗
    * list  选中数据
    * type 工序名称，默认为机加
    * 机加工序类型
    */
   /**机加 */
   const open = (list: Array, type: number, dictMachiningProcess:number) => {
     dialogVisible.value = true
     queryParams.dictProcessName = type
     queryParams.dictMachiningProcess = dictMachiningProcess
     multipleSelection.value = list
     getList()
   }
   /**关闭弹框 */
   const multipleTableRef = ref()
   const closeEialog = () => {
     dialogVisible.value = false
     multipleSelection.value = []
     multipleTableRef.value.clearSelection()
   }

   defineExpose({ open }) // 提供 open 方法，用于打开弹窗
   const submitForm = () => {
     emit('selectList', multipleSelection.value)
     closeEialog()
   }
   /** 提交表单 */
   const emit = defineEmits(['selectList']) // 定义 success 事件，用于操作成功后的回调
</script>
<style lang="scss" scoped>
   .footer {
     display: flex;
     justify-content: flex-end;
   }
</style>